<!--添加自动化   添加自定义设备 || 特殊设备 -->
<template>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    style="width: 50%; height: 100%; float: right; margin: 0"
    :close-on-click-modal="false"
    :showClose="false"
    :before-close="Cancel"
  >
    <!-- 头部 -->
    <template #title>
      <!-- 这里添加您希望在左上角放置的内容，例如关闭按钮 -->
      <span>
        <i class="el-icon-close" @click="dialogVisible = false" style="cursor: pointer"></i>
      </span>
      <span> 添加特殊设备动作 </span>
    </template>
    <el-form label-position="top">
      <!-- 上面两行input -->
      <div style="display: flex">
        <!-- 设备选择 -->
        <el-form-item label="设备选择" style="display: inline-block; flex: 1">
          <el-select
            v-model="SelectDevice"
            placeholder="请选择"
            style="width: 100%"
            @change="DeviceChange"
          >
            <el-option
              v-for="item in AxiosOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="选择动作">
        <el-col v-for="(item, index) in executions" :key="index">
          <div v-if="item.type == 'write' || item.type == 'both'">
            <!-- 特殊设备 -->
            <div
              v-if="
                item.statusName === 'SpecialEquipment' ||
                item.statusName === 'specialStepping' ||
                item.statusName === 'SystemVariable'
              "
              style="display: flex; align-items: center"
            >
              <!-- 执行条件的文字显示 -->
              <span style="flex: 1; text-align: center">
                <el-select
                  v-model="item.statusType"
                  class="m-2"
                  placeholder="请选择"
                  @change="Specialchange(item)"
                >
                  <el-option
                    v-for="item in SpecialEquipmentTemp3"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </span>

              <!-- 写  单个寄存器-->

              <div
                style="flex: 1; text-align: center; margin-left: 3%"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'"
              >
                <el-select v-model="item.operateRegisterType" class="m-2" placeholder="请选择">
                  <el-option
                    v-for="item in SpecialEquipmentTemp2"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <!-- 读  系统变量文本-->
              <div style="flex: 1; text-align: center; margin-left: 1%" v-else>系统变量</div>

              <!-- 写  寄存器地址-->
              <span
                style="flex: 2; text-align: center; margin-left: 3%"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'"
              >
                <el-input
                  placeholder="16进制寄存器地址"
                  v-model="item.registerAddressValue"
                ></el-input>
              </span>
              <!-- 读  系统变量 -->
              <span style="flex: 2; text-align: center; margin-left: 1%" v-else>
                <el-select
                  v-model="item.deviceId"
                  class="m-2"
                  placeholder="请选择"
                  @change="selectSpecial(item)"
                >
                  <el-option
                    v-for="item in SystemVariable"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </span>
              <div style="text-align: center; margin: 0 1rem 0 1rem">=</div>

              <!-- 写 -->
              <div
                style="flex: 2; text-align: center"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'"
              >
                <el-select
                  v-model="item.ishowinput"
                  class="m-2"
                  placeholder="请选择"
                  @change="selectSpecialtoggle(item)"
                >
                  <el-option
                    v-for="item in Changelist"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <!-- 读 -->
              <div style="flex: 2; text-align: center" v-else>
                <el-select v-model="item.operateRegisterType" class="m-2" placeholder="请选择">
                  <el-option
                    v-for="item in SpecialEquipmentTemp1"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>

              <!-- 写   系统变量和值切换  -->
              <span
                style="flex: 2; text-align: center; margin-left: 3%"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'"
              >
                <el-select
                  style="width: 100%"
                  v-if="item.ishowinput === '1'"
                  v-model="item.variableId"
                  placeholder="请选择"
                  @change="selectSpecialWrite(item)"
                >
                  <el-option
                    v-for="item in SystemVariable"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-input v-else placeholder="请输入寄存器值" v-model="item.statusValue"></el-input>
              </span>

              <!-- 读 -->
              <span style="flex: 2; text-align: center; margin-left: 3%" v-else>
                <el-input
                  placeholder="16进制寄存器地址"
                  v-model="item.registerAddressValue"
                ></el-input>
              </span>

              <span style="flex: 1; text-align: center">
                <el-link @click="DeleteFilled(index, 1)" :underline="false" style="margin-left: 3%"
                  ><el-icon><DeleteFilled /></el-icon
                ></el-link>
              </span>
            </div>
            <!-- 自定义设备 -->
            <div v-else style="display: flex; align-items: center">
              <span style="flex: 1; text-align: center">{{ item.propertyName }}</span>
              <span style="flex: 1; text-align: center">等于</span>
              <span style="flex: 2; text-align: center">
                <el-select
                  v-model="item.statusType"
                  class="m-2"
                  placeholder="请选择"
                  @change="changeRegister(item)"
                >
                  <el-option
                    v-for="item in AutoRendermod2[item.rendermod2]"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </span>
              <!-- 读 -->
              <span
                style="flex: 2; text-align: center; margin-left: 2%"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_READ'"
              >
                <el-select
                  v-model="item.deviceId"
                  class="m-2"
                  placeholder="请选择"
                  @change="selectRegister(item)"
                >
                  <el-option
                    v-for="item in SystemVariable"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </span>
              <!-- 写 -->
              <span
                style="flex: 2; text-align: center; margin-left: 2%"
                v-if="item.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'"
              >
                <el-input v-model="item.statusValue" @change="Registerinput(item)"></el-input>
              </span>
              <span style="flex: 1; text-align: center">
                <el-link @click="DeleteFilled(index, 1)" :underline="false" style="margin-left: 3%"
                  ><el-icon><DeleteFilled /></el-icon
                ></el-link>
              </span>
            </div>
          </div>
        </el-col>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteActions">删除</el-button>
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <!-- <el-button @click="loginaa">显示设备</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import AutoRendermod2JSON from '../../../MyJson/AutoRendermod2.json'
import AutoRendermod1JSON from '../../../MyJson/AutoRendermod1.json'
import until from '../../../until/csUntil/deviceUtils.js'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

export default {
  setup(_, { emit }) {
    // 导入 自动化模板2
    const AutoRendermod2 = ref(AutoRendermod2JSON.template)
    // 导入 自动化模板1
    const AutoRendermod1 = ref(AutoRendermod1JSON.template)
    // dialog的关闭显示
    const dialogVisible = ref(false)
    //  select  选择设备的值
    const SelectDevice = ref('')
    // vuex导入
    const store = useStore()
    // 假数据
    // 设备 vuex
    const DeviceVuex = ref(store.state.beforeAllDevice)
    const AxiosOptions = ref(null)
    // vuex 设备类型
    const deviceTypeStr = ref(store.state.deviceTypeStr)
    // 动作
    const executions = ref([])

    // 设备id
    const id = ref(null)
    // 设备名称
    const deviceName = ref(null)

    const showDelete = ref(false)

    const SystemVariable = ref([])

    const ishowinput = ref('1')

    const readvalue = ref(null)

    const SpecialEquipmentTemp1 = ref([
      { name: '读输出寄存器', value: 'REGISTER_READ_OUTPUT' },
      { name: '读输入寄存器', value: 'REGISTER_READ_INPUT' }
    ])

    const SpecialEquipmentTemp2 = ref([
      // { name: '单个寄存器', value: 'REGISTER_WRITE_SINGLE' },
      { name: '10指令', value: 'REGISTER_WRITE_MULTIPLE' }
    ])

    const SpecialEquipmentTemp3 = ref([
      { name: '写', value: 'AUTO_SCHED_EXECUTION_REGISTER_WRITE' },
      { name: '读', value: 'AUTO_SCHED_EXECUTION_REGISTER_READ' }
    ])

    const Changelist = ref([
      { name: '系统变量', value: '1' },
      { name: '值', value: '2' }
    ])
    //
    //
    //
    //
    //
    //
    //
    //
    // 打开dialog
    const openmyDialog = () => {
      dialogVisible.value = true
    }
    // 选中设备的值
    const DeviceChange = (event) => {
      executions.value = []

      id.value = event
      const res = AxiosOptions.value.find((item) => item.id === event)
      if (res) {
        deviceName.value = res.name
        const result = JSON.parse(JSON.stringify(res))
        console.log(result.property[0])

        result.property.forEach((item) => {
          if (item.propertyName === '输出寄存器') {
            result.property[0].statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          } else {
            result.property[1].type = 'read'
          }

          if (item.propertyName === '寄存器') {
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          }
        })
        executions.value = result.property
      }
      // console.log(event)
      // console.log(AxiosOptions.value)
    }
    // 选中寄存器
    const selectRegister = (data) => {
      const dds = SystemVariable.value.filter((item) => item.id === data.deviceId)
      data.statusValue = `${id.value}.${data.statusName}`
      data.deviceName = dds[0].name
      // "deviceId": "需要被赋值的系统变量的设备表ID",
      // "statusName": "需要被赋值的系统变量的属性名",
      // "statusValue": "{寄存器的表id.读寄存器的statusName}",
      // "deviceName": "系统变量的设备名"
      data.specialName = deviceName.value
    }
    //
    const selectSpecial = (data) => {
      const dds = SystemVariable.value.filter((item) => item.id === data.deviceId)
      // data.deviceId = id.value

      data.deviceName = dds[0].name

      data.statusName = 'SystemVariable'
      data.specialName = deviceName.value
    }
    //
    const changeRegister = (data) => {
      getNewlistSpecial()
      if (data.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE') {
        executions.value.forEach((item) => {
          item.statusValue = ''
          if (item.propertyName === '输入寄存器') {
            item.type = 'write'
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'
          } else if (item.propertyName === '输出寄存器') {
            item.type = 'read'
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          }
        })
      } else {
        executions.value.forEach((item) => {
          item.statusValue = ''
          if (item.propertyName === '输入寄存器') {
            item.type = 'read'
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_WRITE'
          } else if (item.propertyName === '输出寄存器') {
            item.type = 'write'
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          }
        })
      }
    }

    const Registerinput = (data) => {
      data.executionType = 'AUTO_SCHED_EXECUTION_TYPE_DEVICE'
      data.deviceId = id.value
      data.deviceName = deviceName.value

      // "deviceId": "寄存器ID",
      // "statusType": "AUTO_SCHED_EXECUTION_REGISTER_WRITE",
      // "statusName": "寄存器写的属性名",
      // "statusValue": "用户填的值",
      // "deviceName": "寄存器设备名字"
    }
    // 删除
    const DeleteFilled = (index) => {
      executions.value.splice(index, 1)
    }
    // 确定后输出表单
    const submit = () => {
      const uuid = uuidv4()
      let result = []
      executions.value.map((item) => {
        if (item.statusValue || item.variableId || item.value || item.deviceId) {
          if (item.operateRegisterType) {
            item.id = uuid
            item.Change = 'SpecialEquipment'
            result.push(item)
          } else {
            let res = {
              id: uuid,
              executionType: 'AUTO_SCHED_EXECUTION_TYPE_DEVICE',
              deviceId: item.deviceId,
              statusName: item.propertyName,
              statusValue: item.statusValue,
              deviceName: item.deviceName,
              rendermod1: item.rendermod1,
              rendermod2: item.rendermod2,
              type: item.type,
              renderModel: item.renderModel,
              name: item.propertyName,
              Change: 'SpecialEquipment',
              statusType: item.statusType,
              propertyName: item.propertyName,
              changeid: id.value,
              specialName: item.specialName
            }
            result.push(res)
          }
        }
      })

      if (result.length) {
        // console.log(result)
        emit('executions', result)
        Cancel()
      } else {
        ElMessage.error('请选择设备')
      }
    }
    // 取消
    const Cancel = () => {
      SelectDevice.value = ''
      executions.value = []
      dialogVisible.value = false
      showDelete.value = false
    }
    //
    const loginaa = () => {}

    const filterList = (data) => {
      // data.forEach((item) => {
      //   item.forEach((event) => {
      //     dds[event.deviceName] = true
      //   })
      // })

      const MyfilterList = DeviceVuex.value
      const result = MyfilterList.filter((item) => {
        return item.isShow === 'write' && item.pid === '-1' && item.Channels === -1
      })

      // result.forEach((item) => {
      //   if (dds[item.name]) {
      //     item.disabled = true
      //   }
      // })

      AxiosOptions.value = result

      SystemVariable.value = []
      DeviceVuex.value.forEach((item) => {
        if (item.SystemVariableType === 'NUMBER') {
          SystemVariable.value.push(item)
        }
      })

      // console.log(data)
      // const dds = {}
      // console.log(executions.value)
    }
    // 删除
    const DeleteActions = () => {
      emit('DeleteActions')
      Cancel()
    }

    const Specialchange = (data) => {
      data.specialDeviceId = id.value
      data.operateRegisterType = ''
      data.registerAddressValue = ''
      data.statusValue = ''
      data.deviceId = ''
      data.deviceName = ''
      data.executionType = 'AUTO_SCHED_EXECUTION_TYPE_DEVICE'

      if (data.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE') {
        data.deviceId = id.value
        data.deviceName = deviceName.value
      }

      // console.log(data)
      if (data.statusType === 'AUTO_SCHED_EXECUTION_REGISTER_WRITE') {
        data.operateRegisterType = 'REGISTER_WRITE_MULTIPLE'
      }
    }

    const selectSpecialtoggle = (item) => {
      if (item.ishowinput === '1') {
        item.statusValue = ''
      } else {
        item.variableId = ''
      }
    }

    const selectSpecialWrite = (data) => {
      const dds = SystemVariable.value.filter((item) => item.id === data.variableId)
      // data.deviceId = id.value

      data.deviceName = dds[0].name
      data.specialDeviceId = id.value
      data.statusName = 'SystemVariable'
      data.specialName = deviceName.value
    }

    // 补充自定义设备的数据
    const getNewlistSpecial = () => {
      executions.value = []
      const res = AxiosOptions.value.find((item) => item.id === id.value)
      if (res) {
        deviceName.value = res.name
        const result = JSON.parse(JSON.stringify(res))
        console.log(result.property[0])
        result.property.forEach((item) => {
          if (item.propertyName === '输出寄存器') {
            result.property[0].statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          } else {
            result.property[1].type = 'read'
          }

          if (item.propertyName === '寄存器') {
            item.statusType = 'AUTO_SCHED_EXECUTION_REGISTER_READ'
          }
        })
        executions.value = result.property
      }
    }
    return {
      showDelete,
      AutoRendermod2,
      deviceTypeStr,
      executions,
      dialogVisible,
      SelectDevice,
      AxiosOptions,
      id,
      DeviceVuex,
      deviceName,
      AutoRendermod1,
      SystemVariable,
      SpecialEquipmentTemp3,
      SpecialEquipmentTemp1,
      SpecialEquipmentTemp2,
      Changelist,
      readvalue,
      ishowinput,
      selectSpecial,
      openmyDialog,
      submit,
      DeviceChange,
      DeleteFilled,
      Cancel,
      filterList,
      loginaa,
      DeleteActions,
      selectRegister,
      changeRegister,
      Registerinput,
      Specialchange,
      selectSpecialtoggle,
      selectSpecialWrite,
      getNewlistSpecial
    }
  }
}
</script>
  
  <style lang="less" scoped>
.myCascader {
  display: flex;
}
</style>
  